<template>
  <div>
    <div style="margin-top:0px;width: calc(100% - 10px);height:calc(100vh - 60px);">
      <RelationGraph ref="graphRef" :options="graphOptions">
        <template #node="{node}">
          <div class="my-node-style" :style="{'background-image': 'url(' + node.data.icon + ')'}">
          </div>
          <div class="c-node-name" :style="{color:node.color}">{{node.text}}</div>
        </template>
        <template #graph-plug>
          <div style="position:absolute;z-index:700;left:20px;top:20px;height:110px;padding-top:6px;padding-left: 30px;padding-right:30px;border: #efefef solid 1px;color: #555555;border-radius: 10px;background-color: rgba(255,255,255,0.79);font-size: 12px;">
            <div style="">
              <div style="line-height: 20px;">节点筛选：</div>
              <el-radio-group v-model="checked_sex" size="mini" @change="doFilter">
                <el-radio-button label="">全部</el-radio-button>
                <el-radio-button label="男"></el-radio-button>
                <el-radio-button label="女"></el-radio-button>
              </el-radio-group>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <el-radio-group v-model="checked_isgoodman" size="mini" style="margin-left:50px;" @change="doFilter">
                <el-radio-button label="">全部</el-radio-button>
                <el-radio-button :label="true">正面人物</el-radio-button>
                <el-radio-button :label="false">反面人物</el-radio-button>
              </el-radio-group>
            </div>
            <div>
              <div style="line-height: 20px;">关系筛选：</div>
              <el-checkbox-group v-model="rel_checkList" @change="doFilter">
                <el-checkbox v-for="thisItem in all_rel_type" :key="thisItem" :label="thisItem" />
              </el-checkbox-group>
            </div>
          </div>
        </template>
      </RelationGraph>
    </div>

  </div>
</template>

<script>
import RelationGraph from 'relation-graph';
import demoData from './Demo4AdvDataFilterData.json';
const graphOptions = {
  debug: false,
  defaultNodeBorderWidth: 0,
  defaultNodeColor: 'rgba(238, 178, 94, 1)',
  allowSwitchLineShape: true,
  allowSwitchJunctionPoint: true,
  defaultLineShape: 1,
  'layouts': [
    {
      'label': '自动布局',
      'layoutName': 'force',
      'layoutClassName': 'seeks-layout-force'
    }
  ],
  defaultJunctionPoint: 'border'
};
export default {
  name: 'RelationGraphDemo',
  components: { RelationGraph },
  data() {
    return {
      g_loading: true,
      demoname: '---',
      checked_sex: '',
      checked_isgoodman: '',
      rel_checkList: ['师生', '上下级', '亲戚', '情人', '朋友', '夫妻', '勾结', '腐化', '举报'],
      all_rel_type: ['师生', '上下级', '亲戚', '情人', '朋友', '夫妻', '勾结', '腐化', '举报'],
      graphOptions
    };
  },
  created() {
  },
  mounted() {
    this.demoname = 'scene-relationship';
    this.setGraphData();
  },
  methods: {
    setGraphData() {
      const __graph_json_data = demoData;
      this.$refs.graphRef.setJsonData(__graph_json_data, (graphInstance) => {
        // 这些写上当图谱初始化完成后需要执行的代码
        console.log(graphInstance)
      });
    },
    doFilter() {
      const _all_nodes = this.$refs.graphRef.getInstance().getNodes();
      const _all_links = this.$refs.graphRef.getInstance().getLinks();
      _all_nodes.forEach(thisNode => {
        let _isHideThisLine = false;
        if (this.checked_sex !== '') {
          if (thisNode.data['sexType'] !== this.checked_sex) {
            _isHideThisLine = true;
          }
        }
        if (this.checked_isgoodman !== '') {
          if (thisNode.data['isGoodMan'] !== this.checked_isgoodman) {
            _isHideThisLine = true;
          }
        }
        thisNode.opacity = _isHideThisLine ? 0.1 : 1;
      });
      _all_links.forEach(thisLink => {
        thisLink.relations.forEach(thisLine => {
          if (this.rel_checkList.indexOf(thisLine.data['type']) === -1) {
            if (!thisLine.isHide) {
              thisLine.isHide = true;
              console.log('Hide line:', thisLine);
            }
          } else {
            if (thisLine.isHide) {
              thisLine.isHide = false;
              console.log('Show line:', thisLine);
            }
          }
        });
        // thisNode.opacity = _isShowThisNode ? 1 : 0.1
      });
      this.$refs.graphRef.getInstance().dataUpdated();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.my-node-style{
  background-position: center center;
  background-size: 100%;
  height:100%;
  width:100%;
  border-radius: 40px;
  overflow: visible;
}
.c-node-name{
  width:80px;
  text-align:center;
  color: #2E74B5;
  margin-top: 10px;
}

</style>
